<template>
    <div class="container">
      <div class="input-container">
        <div class="ghhjj">
        <span class="police1">联系人姓名</span>
        <el-input
          v-model="handlerName"
          placeholder="请输入联系人姓名"
          size="middle"
          class="input-box"
        ></el-input>
        <el-button
          size="middle"
          type="primary"
          icon="el-icon-search"
          @click="handleSearch"
          class="search-btn"
          >搜索</el-button
        >
        <el-button
          size="middle"
          type="default"
          icon="el-icon-refresh"
          @click="handleReset"
          class="reset-btn"
          >重置</el-button
        >
      </div>
          
    </div>
      <div class="table-container">
        <el-table
          ref="multipleTable"
          :data="tableData"
          tooltip-effect="dark"
          style="width: 100%"
          @selection-change="handleSelectionChange"
        >
          <el-table-column width="55"></el-table-column>
          <el-table-column
            prop="id"
            label="联系人属性表编号"
            width="120"
          ></el-table-column>
          <el-table-column
            prop="idrecord"
            label="报警编号"
            width="120"
          ></el-table-column>
          <el-table-column
            prop="policeType"
            label="报警类型"
            width="120"
          ></el-table-column>
          <el-table-column
            prop="equipmentname"
            label="设备名称"
            width="120"
          ></el-table-column>
          <el-table-column
            prop="begintime"
            label="报警时间"
            width="120"
          ></el-table-column>
          <el-table-column
            prop="statue"
            label="状态"
            width="120"
          ></el-table-column>
          <el-table-column
            prop="handlerName"
            label="处理人姓名"
            width="120"
           
          ></el-table-column>
          <el-table-column label="操作1">
    <template slot-scope="scope">
      <el-button
        size="mini"
        type="success"
        @click="showConfirm(scope.$index, scope.row)"
      >
        报警处理
      </el-button>
    </template>
    show-overflow-tooltip
  </el-table-column>
        </el-table>
  
      </div>
      
      <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pageNum"
      :page-sizes="[5,10,15, 20, 30, 40]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
    </div>
  </template>
  
  <script>
  import Axios from "axios";
  import moment from "moment-timezone";
  export default {
    data() {
      return {
        handlerName: "",
        tableData: [],
        selectedRow: null,
        cunchushu1: [],
        dateRange: [],
        selectedNames1: [], // 存放选中行的 name 变量的全局数组
        //multipleSelection: [],
        adddialogVisible: false,
        dialogVisible: false,
        pageNum: 1,
        pageSize: 10,
        total:400,
        formData: {
          id: "",
          idrecord: "",
    policeType: "",
    equipmentname: "",
    begintime: "",
    statue: "",
    handlerName: "",
  },
  selectedRow: {
    id: "",
     idrecord: "",
    policeType: "",
    equipmentname: "",
    begintime: "",
    statue: "",
    handlerName: "",
  },
      // 表单验证规则
      formRules: {
        id: [
          { required: true, message: "请输入报警编号", trigger: "blur" },
        ],
        idrecord: [
          { required: true, message: "请输入报警编号", trigger: "blur" },
        ],
        policeType: [
          { required: true, message: "请输入报警类型", trigger: "blur" },
        ],
        equipmentname: [
          { required: true, message: "请输入设备名称", trigger: "blur" },
        ],
        begintime: [
          { required: true, message: "报警时间", trigger: "blur" },
        ],
        statue: [
          { required: true, message: "请输入设备状态", trigger: "blur" },
        ],
        handlerName: [
          { required: true, message: "请输入处理人姓名", trigger: "blur" },
        ]
      },
    };
    },
    
    mounted() {
      this.page();
    },
    methods: {
  
      async alterhandle(index, row) {
      try {
        this.selectedRow = Object.assign({}, row);
        const selectedTime = moment(this.selectedRow.begintime);
        const deviceTimeZone = moment.tz.guess();
        const localTime = selectedTime.tz(deviceTimeZone).format("YYYY-MM-DD");
        this.selectedRow.begintime = localTime;
        this.dialogVisible = true;
        const response = await Axios.post('http://localhost:8080/linkPerson/delay', this.selectedRow);
        console.log(response.data);
      } catch (error) {
        console.error(error);
      }
    },
    showConfirm(index, row) {
      this.$confirm('是否确定处理该报警？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.alterhandle(index, row);
      }).catch(() => {
        // 用户取消操作
      });
    },
      handleCurrentChange(pageNum){
        this.pageNum = pageNum;
        this.page();
      },
      handleSizeChange(pageSize){
        this.pageSize = pageSize;
        this.page();
      },
      //限定当天日期返回的表格数据，
      page(){
        Axios.get(`http://localhost:8080/linkPerson/page?pageNum=${this.pageNum}&pageSize=${this.pageSize}`)
        .then((res) => {
          console.log(res);
          this.tableData = res.data.data;
         this.total = this.tableData.length;
        })
        .catch((err) => {
          console.log(err);
        });
      },
  
      handleReset(){
        this.pageNum = 1;
        this.pageSize = 10;
        // `http://localhost:8080/example/alert?pageNum=${pageNum}&pageSize=${pageSize}`
        this.handlerName = ''
        this.page();
      },
      handleSearch() {
    if (!this.handlerName) {
      this.$message.warning("请输入设备名称");
      return;
    }
    const params = {};
    if (this.handlerName) {
      params.handlerName = this.handlerName;
    }
    const url = 'http://localhost:8080/linkPerson/search';
    Axios.get(url, { params })
      .then(response => {
        if (response.data.length === 0) {
          this.$message.warning("没有搜索到相关信息");
          return;
        }
        for (let i = 0; i < response.data.data.length; i++) {
          const selectedTime = moment(response.data.data[i].begintime);
          const deviceTimeZone = moment.tz.guess();
          const localTime = selectedTime.tz(deviceTimeZone).format("YYYY-MM-DD");
          response.data.data[i].begintime = localTime;
        }
        this.tableData = response.data.data;
      })
      .catch(error => {
        console.error(error);
        this.$message.error("搜索出错，请稍后再试");
      });
  },
      toggleSelection(rows) {
        if (rows) {
          rows.forEach((row) => {
            this.$refs.multipleTable.toggleRowSelection(row);
          });
        } else {
          this.$refs.multipleTable.clearSelection();
        }
      },
      dateFilter(row, column) {
        return moment(row.activationTime).format("YYYY-MM-DD HH:mm:ss");
      },
  
  },
  };
  </script>
  
  <style scoped>
  .container {
    margin-top: 30px;
  }
  .ghhjj{
    display:flex;
    margin:20px;
    align-items:justify-content;
  }
  .police1 {
    margin-right: 20px;
  }
  .input-container {
    align-items: center;
    margin-bottom: 10px;
    margin-left: 20px;
    display: inline-block;
  }
  
  .input-box {
    width: 300px;
    margin-right: 10px;
  }
  
  .search-btn {
    margin-left: 10px;
  }
  
  .table-container {
    position: relative;
    width: 100%;
  }
  
  .option {
    margin-left: 20px;
  }
  </style>
  <!-- 03  当前页面 -->